<template>
  <div class="container">
    <div class="container-header">
      <img class="logo" src="~@/assets/img/logo.png" alt="" />
      <div class="input">
        <input
          class="search"
          placeholder="请输入您要搜索的内容"
          v-model="searchContent"
        />
        <img
          class="img"
          @click="searchItem"
          src="~@/assets/img/search.png"
          alt=""
        />
      </div>
    </div>
    <div class="container-main">
      <div class="s">
        <div class="s1">
          <li class="li1">随时随地，为您服务</li>
          <li class="li2">365 DAYS</li>
          <li class="li3">To The Future Of Yourself</li>
        </div>
        <div class="s2">
          
        </div>
      </div>
      <div class="z"></div>
      <div class="x"></div>
    </div>
    <div class="container-footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchContent: "",
    };
  },
  methods: {
    searchItem() {
      alert(this.searchContent);
    },
  },
};
</script>
<style  scoped>
.container {
  width: 100%;
  height: 100%;
}

.container-header {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.container-header .logo {
  width: 310px;
  height: 60px;
  margin: auto 0;
  margin-left: 16%;
}

.container-header .input {
  width: 261px;
  height: 37px;
  margin: auto 0;
  margin-right: 18%;
  position: relative;
}

.container-header .input .search {
  width: 180px;
  height: 37px;
  border: 1px solid #bfbfbf;
  border-radius: 18px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  padding: 0 60px 0 20px;
  color: #999999;
  margin: auto 0;
  position: absolute;
}

.container-header .input .img {
  width: 22px;
  height: 22px;
  position: absolute;
  margin-left: 85%;
  margin-top: 4%;
}

.container-footer {
  width: 100%;
  height: 100px;
}

.container .container-main {
  background-color: rgb(85, 148, 93);
  padding: 0px;
}

.container .container-main .s {
  width: 100%;
  height: 620px;
  background-image: url("~@/assets/img/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container .container-main .s .s1 {
  margin: auto 0;
  margin-left: 14%;
  height: 350px;
}

.container .container-main .s .s1 .li1 {
  height: 45px;
  font-size: 45px;
  font-family: zcool-gdh;
  font-weight: 400;
  color: #ffffff;
  /**设置字体间距**/
  letter-spacing: 15px;
}
.container .container-main .s .s1 .li2 {
  height: 40px;
  font-size: 40px;
  font-family: zcool-gdh;
  font-weight: bold;
  color: #ffffff;
  margin-top: 42px;
}

.container .container-main .s .s1 .li3 {
  width: 298px;
  height: 52px;
  border: 2px solid #ffffff;
  margin-top: 28px;
  height: 22px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  padding: 15px 15px 18px;
}
.container .container-main .s .s2 {
  margin: auto 0;
  margin-right: 17%;
  width: 460px;
  height: 490px;
  background: #ffffff;
  border-radius: 20px;
}
</style>